<template>

  <NuxtLayout name="manage-layout">
    <template #main>

      <div class="min-h-dvh flex justify-center">
        <div class="card bg-base-100 w-11/12 shadow-xl">
          <div class="flex justify-center">
            <div class="flex flex-col gap-8 w-8/12 mt-20">

              <div class="flex flex-col overflow-y-auto px-4 py-4 border-2 rounded rounded-xl" style="height:500px;">
                <div class="chat" :class="chatObj.position === 'left' ? 'chat-start' : 'chat-end'" v-for="chatObj in chatListRef">
                  <div class="chat-header">
                    {{chatObj.name}}
                  </div>
                  <div class="chat-bubble bg-sky-500 text-white">{{chatObj.text}}</div>
                </div>
              </div>

              <div class="flex flex-col">
                <label class="form-control">
                  <textarea class="textarea textarea-bordered h-24" v-model="questionRef" placeholder="请输入问题"></textarea>
                  <div class="label">
                    <span class="label-text-alt"></span>
                    <button class="btn btn-success text-white" @click="submitQuestion()">提问</button>
                  </div>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>

    </template>
  </NuxtLayout>


</template>

<script setup>

import {httpPost} from "~/utils/http/http-helper.js";
import {notificationWarning} from "~/utils/notification/index.js";

const computerName = 'AI'
const chatListRef = ref([])
const questionRef = ref('')


definePageMeta({
  index: 'chat',
})

function submitQuestion(){
  const question = questionRef.value

  if(!question){
    notificationWarning('请输入问题')
    return
  }
  chatListRef.value.push({
    'position': 'right',
    'text': question,
    'name': '我'
  })
  const requestBody = {
    question: question
  }
  questionRef.value = ''
  // httpPost('http://localhost:5000/chat', requestBody).then(resp => {
  //   console.log(resp)
  //   chatListRef.value.push({
  //     position: 'left',
  //     text: resp.answer,
  //     name: computerName
  //   })
  // })
}

// function testData(){
//   chatListRef.value.push({
//     position: 'right',
//     text: '感冒了去哪个科室',
//     name: '我',
//   })
//   chatListRef.value.push({
//     position: 'left',
//     text: '你说呢',
//     name: 'AI智障',
//   })
//   chatListRef.value.push({
//     position: 'right',
//     text: '问你呢啊',
//     name: '我',
//   })
//   chatListRef.value.push({
//     position: 'left',
//     text: 'AI智障不会啊',
//     name: 'AI智障',
//   })
// }

</script>

<style scoped>

</style>